/**
  * @class Ext.LoadMask
  * Component used to mask a component
  */
.#{$prefix}mask {
  z-index: 100;

  position: absolute;
  top: 0;
  left: 0;

  @include opacity($mask-opacity);

  width: 100%;
  height: 100%;
  // @tag iezoomhack

  background: $mask-background;

  // @tag frameme
}

.#{$prefix}mask-msg {
  z-index: 20001;

  position: absolute;
  top: 0;
  left: 0;

  @include box-shadow(rgba(#000, .2) 0 1px 2px);
  padding: $loadmask-msg-padding;
  // border: 1px solid;
  // border-color: $loadmask-msg-border-color;

  @include border-radius(6px);

  @if $loadmask-msg-background-gradient {
    @if $supports-gradients or $compile-all {
      @include background-gradient($loadmask-base-color, $loadmask-msg-background-gradient);
    }
  } @else {
    background: $loadmask-base-color;
  }

  div {
    padding: $loadmask-msg-inner-padding;

    // if an icon is defined show it
    @if $loadmask-msg-inner-icon != null {
      background-image: theme-background-image($theme-name, $loadmask-msg-inner-icon);
      background-repeat: no-repeat;
      background-position: 5px center;
    }

    // @tag question Not a great effect...
    // cursor: wait;
    cursor: default;
    font-size: $loadmask-font-size;
    font-weight: bold;
    @include color-by-background($loadmask-base-color, $default-color: $base-color, $contrast: 30);
  }
}